        <?
        require_once('header.php'); // uri  
        ?>
    
    <link rel="stylesheet" href="css/mainpage.css">
    <link rel="stylesheet" href="css/addbook.css">
        <!--[if lt IE 7]>
            <p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
        <![endif]-->
       	
       	<div class="wrpOuter">
            <div class="wrpPage">
        <?
        require_once('subheader.php'); // uri  
        ?>
                <div class="wrpOuterBody">
                    <div class="wrpBody clear">
                    <?
                    require_once('menu.php'); // uri  
                    ?>
                        <!-- contentlist -->
                        <div class="wrpOuterContentList">
                            <div class="wrpInnerContentlist">
                               <div class="wrpAddBookLoad">
                                    <div class="navTopBar">
                                        <h2 class="tabShowTopBar">ADD Book</h2>
                                    </div>
                                    <div class="wrapCreateBookDP">
                                                <div class="wrapCreateBook">
                                                    <form class="formCreateBook">
                                                        <div class="wrapGenInfo">
                                                            <p class="textGenInfo titleGenInfo">General Infomation</p>
                                                            <div class="wrapTmbnlBook">
                                                                <div class="wrpInnerTmbBook">
                                                                    <img class="upThumImg" src="img/thumnailbookdefault.jpg" alt="upimage">
                                                                <p class="recommendTmbnlBook textUnderTumbnl">300 x 300 px</p>
                                                                <button class="btnAddTmbnl btnAddB">+ Thumbnail</button>
                                                                </div>
                                                            </div>
                                                            <div class="wrapTitleandDsctBook">
                                                                <input class="inptTitleBook inptTiDesBook" type="text" placeholder="Title">
                                                                <textarea class="inptDsctShelf inptTiDesBook" placeholder="Description" value=""></textarea>
                                                                <select class="inptCat inptTiDesBook">
                                                                    <option value="">Select Categories</option>
                                                                    <?
                                                                    if(count($this->data['shelf']['tag']))
                                                                    {
                                                                    foreach($this->data['shelf']['tag'] as $valuetag)
                                                                    {
                                                                     ?>
                                                                    <option value="<?=$valuetag['tagid']?>"><?=$valuetag['name']?></option>    
                                                                     <?
                                                                    
                                                                    
                                                                    }
                                                                    
                                                                    
                                                                    }
                                                                    
                                                                    ?>
                                                                </select>
                                                                <select class="inptType inptTiDesBook">
                                                                    <option value="">Select Book Type</option>
                                                                    <?
                                                                    if(count($this->data['shelf']['cat']))
                                                                    {
                                                                    foreach($this->data['shelf']['cat'] as $valuecat)
                                                                    {
                                                                     ?>
                                                                    <option value="<?=$valuecat['catid']?>"><?=$valuecat['name']?></option>    
                                                                     <?
                                                                    
                                                                    
                                                                    }
                                                                    
                                                                    
                                                                    }
                                                                    
                                                                    ?>
                                                                </select>
                                                                <input class="inptKey inptTiDesBook" type="text" placeholder="Add Keywords - ex. #travel #place">
                                                                <input class="inptPrice inptTiDesBook" type="text" placeholder="Price ($)">
                                                                <div class="inptMode">
                                                                    <strong>Mode</strong>
                                                                    <input type="radio" name="mode"><label>Hide Book</label>
                                                                    <input type="radio" name="mode"><label>Show Book</label>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="wrapDataInfo">
                                                            <p class="textDetailInfo">Detail Information</p>
                                                            <div class="wrapAddSceenshot">
                                                                <div class="addSlide">
                                                                    <div class="wrapScsDef">
                                                                        <div class="wrapTumbnlDef">
                                                                            <div class="upScsImg">
                                                                                <img class="upScsImgA" src="img/sceenshotdef2.png" alt="upimage">
                                                                                <div class="upScsImgA">
                                                                                    <button class="btnAddScs btnAddB">+ Screenshot</button>
                                                                                </div>
                                                                            </div>
                                                                            <div class="upScsImg">
                                                                                <img class="upScsImgA" src="img/sceenshotdef2.png" alt="upimage">
                                                                                <div class="upScsImgA">
                                                                                    <button class="btnAddScs btnAddB">+ Screenshot</button>
                                                                                </div>
                                                                            </div>
                                                                            <div class="upScsImg">
                                                                                <img class="upScsImgA" src="img/sceenshotdef2.png" alt="upimage">
                                                                                <div class="upScsImgA">
                                                                                    <button class="btnAddScs btnAddB">+ Screenshot</button>
                                                                                </div>
                                                                            </div>
                                                                            <div class="upScsImg">
                                                                                <img class="upScsImgA" src="img/sceenshotdef2.png" alt="upimage">
                                                                                <div class="upScsImgA">
                                                                                    <button class="btnAddScs btnAddB">+ Screenshot</button>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <div class="recSizeBar recBar">
                                                                        <p class="recommendScsBook textUnderTumbnl">Recommended Size : 1024 x 768 px</p>
                                                                    </div>
                                                                <div class="dotPageA">
                                                                    <div class="dotOutA dotAP1 dotInA"></div>
                                                                    <div class="dotOutA dotAP2 "></div>
                                                                    <div class="dotOutA dotAP3 "></div>
                                                                    <div class="dotOutA dotAP4 "></div>
                                                                </div>
                                                            </div>
                                                            <div class="wrapAddBook">
                                                                <div class="addBook">
                                                                    <div class="wrapTmbnlFileType">
                                                                        <div class="tmbnlFileType">
                                                                            <i class="bookTypeIcon"></i>
                                                                            <p class="bookType1">.ZAVE</p>
                                                                        </div>
                                                                        <div class="tmbnlFileType">
                                                                            <i class="bookTypeIcon"></i>
                                                                            <p class="bookType2">.PDF</p>
                                                                        </div>
                                                                    </div>
                                                                    <button class="btnBrowseBook btnAddB">+ Book</button>
                                                                </div>
                                                                <div class="recTypeBar recBar">
                                                                        <p class="recommendFileType textUnderTumbnl">File Support : .zave , .pdf</p>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="wrapBtnCreateBook">
                                                            <button class="btnCreateB">Create Book</button>
                                                        </div>
                                                    </form>
                                                </div>
                                    </div>
                                    <script>
                                        $(function() {
                                            //left value = img width + margin-right
                                            $(".dotOutA").click(function() {
                                                $(".dotOutA").addClass("dotInA").not(this).removeClass("dotInA");
                                                switch (true) {
                                                  case $(this).hasClass('dotAP1'):
                                                        $(".wrapTumbnlDef").animate({
                                                            left: '0'
                                                        }, 700 );
                                                        break;
                                                  case $(this).hasClass('dotAP2'):
                                                        $(".wrapTumbnlDef").animate({
                                                            left: '-673px'
                                                        }, 700 );
                                                        break;
                                                  case $(this).hasClass('dotAP3'):
                                                        $(".wrapTumbnlDef").animate({
                                                            left: '-1346px'
                                                        }, 700 );
                                                        break;
                                                  case $(this).hasClass('dotAP4'):
                                                        $(".wrapTumbnlDef").animate({
                                                            left: '-2019px'
                                                        }, 700 );
                                                        break;
                                                }
                                             });
                                        });
                                    </script>
                               </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

       <?
        require_once('footer.php'); // uri  
        ?>